let { $, table, layer, form, upload } = layui;
export default class Edit {
    constructor(obj) {
        this.render();//render自定义取名
        this.handle(obj);
    }
    render() {
        let template = `
        <form style="max-height: 800px; overflow:auto" class="layui-form addForm" lay-filter="updateForm" action="">
        <div class="layui-form-item">
        <label class="layui-form-label">电影名</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入电影名"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影英文名</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="ename"
                required
                lay-verify="required"
                placeholder="请输入电影英文名"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影的类型</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="type"
                required
                lay-verify="required"
                placeholder="请输入电影的类型"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影上映地区</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="area"
                required
                lay-verify="required"
                placeholder="请输入电影上映地区"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影时长</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="time"
                required
                lay-verify="required"
                placeholder="请输入电影时长"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影上映时间</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="upDate"
                required
                lay-verify="required"
                placeholder="请输入电影上映时间"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年代</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="year"
                required
                lay-verify="required"
                placeholder="请输入年代"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影评分</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="score"
                required
                lay-verify="required"
                placeholder="请输入电影评分"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电影票房</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="count"
                required
                lay-verify="required"
                placeholder="请输入电影票房"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">想看人数</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="want"
                required
                lay-verify="required"
                placeholder="请输入想看人数"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">剧情简介</label>
        <div class="layui-input-block">
            <input
                type="text"
                name="intro"
                required
                lay-verify="required"
                placeholder="剧情简介"
                autocomplete="off"
                class="layui-input"
            />
        </div>
    </div>
    
    <div class="layui-form-item">
         <label class="layui-form-label">导演</label>
         <button id="editDirectorBtn" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >修改导演</button>
    </div>
    <div id="directorDiv"></div>

    <div class="layui-form-item">
        <label class="layui-form-label">演员</label>
        <button id="editActorBtn" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >修改演员</button>
    </div>
    <div id="actorDiv"></div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <button id="editImagesBtn" type="button" padding-left="30"  class="layui-btn layui-btn-normal layui-btn-radius" >修改图片</button>
    </div>
    <div id="imagesDiv"></div>

    </form>
        `;
        $("#editfilmsTemplate").html(template);
    };
    handle(obj) {
        console.log("obj:", obj);
        let index = 0;
        let index1 = 0;
        let index2 = 0;
        layer.open({
            type: 1,
            title: "修改电影",
            btn: ['确定', '取消'],
            // success() {
            // },

            // 修改
            yes: function (ind) {
                console.log(index);
                let data = form.val("updateForm");
                console.log(data);
                let director = [];
                let actor = [];
                let images = [];
                for (let i = 0; i < index; i++) {
                    director.push({
                        name: $(`#screenName${i}`).val(),
                        image: $(`[name='headImg${i}']`).val()
                    });
                }
                for (let i = 0; i < index1; i++) {
                    actor.push({
                        name: $(`#screenName1${i}`).val(),
                        filmName: $(`#screenfilmName1${i}`).val(),
                        image: $(`[name='headImg1${i}']`).val()
                    });
                }
                for (let i = 0; i < index2; i++) {
                    images.push($(`[name="headImgImages${i}"]`).val())
                    console.log($(`[name="headImgImages${i}"]`).val())
                }
                data["director"] = JSON.stringify(director);
                data["actor"] = JSON.stringify(actor);
                data["images"] = JSON.stringify(images);
                console.log(data);
                $.ajax({
                    type: "put",
                    url: "/films/" + obj.data._id,
                    data,
                    success(res) {
                        layer.alert("修改成功")
                        table.reload("filmsTable");
                        layer.close(ind);
                    }
                });

            },






            success: function (layero) {

                // 修改搜索
                $.ajax({
                    type: 'get',
                    url: '/films/' + obj.data._id,
                    success(res) {
                        // console.log(res);
                        form.val('updateForm', res.data);
                        form.render();
                    }
                })
                // 导演：
                // 点击编辑就导演渲染到弹出框
                for (let i = 0; i < obj.data.director.length; i++) {
                    let screenStr = `
                    <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName${index}"
                            required
                            lay-verify="required"
                            placeholder="请输入导演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtn${index}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg${index}" width="80" height="100" />
                            <input type="hidden" name="headImg${index}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index="${index}" id="delete1" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    // console.log("obj.data.director:",obj.data.director);
                    $("#directorDiv").append(screenStr);
                    // // 将图片渲染到图片框里
                    $("#uploadImg" + index).attr("src", "/image/" + obj.data.director[index].image);
                    // 将导演名渲染到框里
                    $("#screenName" + index).val(obj.data.director[index].name);

                    $(`[name=headImg${index}]`).val(obj.data.director[index].image);


                    // 上传导演头像
                    // console.log(index);
                    upload.render({
                        elem: `#uploadBtn${index}`,
                        url: "/upload",
                        // 将index赋值给data
                        data: { index },
                        done(res) {
                            console.log(index);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg${this.data.index}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg${this.data.index}]`).val(res.filename);
                        }
                    });
                    console.log("index:", index);
                    index++;
                };
                // 给修改导演的按钮添加事件
                $("#editDirectorBtn").click(function () {

                    let screenStr = `
                    <div id="screenDiv${index}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName${index}"
                            required
                            lay-verify="required"
                            placeholder="请输入导演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtn${index}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg${index}" width="80" height="100" />
                            <input type="hidden" name="headImg${index}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index="${index}" id="delete1" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#directorDiv").append(screenStr);
                    upload.render({
                        elem: `#uploadBtn${index}`,
                        url: "/upload",
                        // 将index赋值给data
                        data: { index },
                        done(res) {
                            console.log(index);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg${this.data.index}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg${this.data.index}]`).val(res.filename);
                        }
                    });
                    index++;
                });

                $("#directorDiv").on("click", ".del-seat-btn", function () {
                    let index = $(this).attr("data-index");
                    $("#screenDiv" + index).remove();
                });

                // 演员：
                // 点击编辑演员就渲染到弹出框
                for (let i = 0; i < obj.data.actor.length; i++) {
                    let screenStr = `
                    <div id="screenDiv${index1}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入演员名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">饰演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenfilmName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入饰演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtnActor${index1}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg1${index1}" width="80" height="100" />
                            <input type="hidden" name="headImg1${index1}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index1="${index1}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#actorDiv").append(screenStr);
                    // // 将图片渲染到图片框里
                    $("#uploadImg1" + index1).attr("src", "/image/" + obj.data.actor[index1].image);
                    $(`[name=headImg1${index1}]`).val(obj.data.actor[index1].image);
                    // 将演员名渲染到框里
                    $("#screenfilmName1" + index1).attr("value", obj.data.actor[index1].name);
                    // 将饰演名渲染到框里
                    $("#screenName1" + index1).attr("value", obj.data.actor[index1].filmName);

                    // 上传头像
                    console.log(index1);
                    upload.render({
                        elem: `#uploadBtnActor${index1}`,
                        url: "/upload",
                        // 将index1赋值给data
                        data: { index1 },
                        done(res) {
                            console.log(index1);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg1${this.data.index1}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg1${this.data.index1}]`).val(res.filename);
                        }
                    });
                    index1++;
                };
                // 给修改演员的按钮添加事件   
                $("#editActorBtn").click(function () {
                    let screenStr = `
                    <div id="screenDiv${index1}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入演员名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">饰演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenfilmName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入饰演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtnActor${index1}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg1${index1}" width="80" height="100" />
                            <input type="hidden" name="headImg1${index1}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index1="${index1}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#actorDiv").append(screenStr);
                    // 上传头像
                    console.log(index1);
                    upload.render({
                        elem: `#uploadBtnActor${index1}`,
                        url: "/upload",
                        // 将index1赋值给data
                        data: { index1 },
                        done(res) {
                            console.log(index1);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg1${this.data.index1}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg1${this.data.index1}]`).val(res.filename);
                        }
                    });
                    index1++;

                });
                $("#actorDiv").on("click", ".del-seat-btn", function () {
                    let index1 = $(this).attr("data-index1");
                    $("#screenDiv" + index1).remove();
                });


                // 演员：

                for (let i = 0; i < obj.data.images.length; i++) {
                    let screenStr = `
                        <div id="screenDiv${index2}" style="border:1px dashed;margin:10px;padding:10px">
                            
                            <div class="layui-form-item">
                            <label class="layui-form-label">图片集</label>
                            <div class="layui-input-block">
                                <button type="button"  class="layui-btn" id="uploadBtnImages${index2}">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="uploadImgImages${index2}" width="80" height="100" />
                                <input type="hidden" name="headImgImages${index2}" >
                            </div>
                            </div>
                            <div class="layui-form-item">
                            <div class="layui-input-inline">
            
                            <button type="button" data-index2="${index2}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                            </div>
                            </div>
                        </div>
                                    `;
                    $("#imagesDiv").append(screenStr);
                    // 将图片渲染到图片框里
                    $("#uploadImgImages" + index2).attr("src", "/image/" + obj.data.images[index2]);
                    $(`[name=headImgImages${index2}]`).val(obj.data.images[index2]);

                    // 上传头像
                    console.log(index2);
                    upload.render({
                        elem: `#uploadBtnImages${index2}`,
                        url: "/upload",
                        // 将index2赋值给data
                        data: { index2 },
                        done(res) {
                            console.log(index2);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImgImages${this.data.index2}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImgImages${this.data.index2}]`).val(res.filename);
                        }
                    });
                    index2++;
                };
                // 给修改图片集的按钮添加事件
                $("#editImagesBtn").click(function () {
                    let screenStr = `
                    <div id="screenDiv${index2}" style="border:1px dashed;margin:10px;padding:10px">
                        
                        <div class="layui-form-item">
                        <label class="layui-form-label">图片集</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtnImages${index2}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImgImages${index2}" width="80" height="100" />
                            <input type="hidden" name="headImgImages${index2}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index2="${index2}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                                `;
                    $("#imagesDiv").append(screenStr);
                    // 上传头像
                    console.log(index2);
                    upload.render({
                        elem: `#uploadBtnImages${index2}`,
                        url: "/upload",
                        // 将index2赋值给data
                        data: { index2 },
                        done(res) {
                            console.log(index2);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImgImages${this.data.index2}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImgImages${this.data.index2}]`).val(res.filename);
                        }
                    });
                    index2++;

                });
                $("#imagesDiv").on("click", ".del-seat-btn", function () {
                    let index2 = $(this).attr("data-index2");
                    $("#screenDiv" + index2).remove();
                });
            },
            content: $("#editfilmsTemplate").html()
        });
    };

}







